Web Development Data Point Shapes এবং Custom Markers গাইড ও নোট

Chart.js একটি অত্যন্ত জনপ্রিয় লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। এটি আপনাকে ডেটা পয়েন্টগুলোর শেপ এবং মার্কার কাস্টমাইজ করার সুযোগ দেয়, যার মাধ্যমে চার্টের আকার এবং ডিজাইন আরও আকর্ষণীয় এবং কাস্টমাইজড করা যায়। আপনি ডেটা পয়েন্টের জন্য বিভিন্ন ধরনের শেপ যেমন circle, triangle, rect, cross, star ইত্যাদি ব্যবহার করতে পারেন, অথবা আপনি কাস্টম মার্কার (Custom Markers) তৈরি করতে পারেন, যেমন ছবি বা গ্রাফিকাল আইকন।

এই গাইডে, আমরা দেখবো কীভাবে Data Point Shapes এবং Custom Markers কাস্টমাইজ করা যায় Chart.js-এ।

১. Data Point Shapes (ডেটা পয়েন্টের আকার)

Chart.js ডিফল্টভাবে কিছু শেপ সাপোর্ট করে যা আপনি আপনার চার্টে ডেটা পয়েন্ট হিসেবে ব্যবহার করতে পারেন। pointStyle প্রপার্টির মাধ্যমে আপনি ডেটা পয়েন্টের আকার কাস্টমাইজ করতে পারেন।

Chart.js-এ ডেটা পয়েন্টের আকার কাস্টমাইজ করা

Chart.js কয়েকটি সাধারণ pointStyle সাপোর্ট করে:

• circle
• rect (রেকটেঙ্গেল)
• triangle
• cross
• star
• custom image (কাস্টম ছবি)

উদাহরণ: ডেটা পয়েন্টের আকার পরিবর্তন করা

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'line', // লাইন চার্ট
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sales Data',
            data: [12, 19, 3, 5, 2],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false,
            pointStyle: 'triangle', // পয়েন্টের আকার পরিবর্তন (ট্রায়াঙ্গেল)
            pointRadius: 10, // পয়েন্টের আকার
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

এখানে:

• pointStyle: 'triangle' দিয়ে আমরা পয়েন্টের শেপকে triangle (ট্রায়াঙ্গেল) হিসেবে সেট করেছি। আপনি চাইলে circle, cross, star অথবা rect ব্যবহার করতে পারেন।

২. Custom Markers (কাস্টম মার্কার)

Chart.js-এ Custom Markers ব্যবহার করতে, আপনি pointStyle প্রপার্টির মাধ্যমে কাস্টম ছবিও ব্যবহার করতে পারেন, যার মাধ্যমে আপনি ছবির আকারে ডেটা পয়েন্ট রেন্ডার করতে পারবেন।

উদাহরণ: কাস্টম মার্কার হিসেবে ছবি ব্যবহার করা

const ctx = document.getElementById('myChart').getContext('2d');

// Custom image for marker
const img = new Image();
img.src = 'https://example.com/custom-marker.png'; // আপনার কাস্টম ছবি এখানে দিন

img.onload = function() {
    const myChart = new Chart(ctx, {
        type: 'line', // লাইন চার্ট
        data: {
            labels: ['January', 'February', 'March', 'April'],
            datasets: [{
                label: 'Sales Data',
                data: [12, 19, 3, 5],
                borderColor: 'rgba(75, 192, 192, 1)',
                fill: false,
                pointStyle: img, // কাস্টম মার্কার (ছবি)
                pointRadius: 20, // পয়েন্টের আকার
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        });
    };
};

এখানে:

• pointStyle: img দিয়ে আমরা একটি কাস্টম ছবি ব্যবহার করেছি। img.src ব্যবহার করে ছবির URL উল্লেখ করা হয়েছে।
• pointRadius দ্বারা আপনি ছবির আকার নির্ধারণ করতে পারেন।

৩. কাস্টম মার্কারের রঙ এবং স্টাইল পরিবর্তন করা

আপনি pointBackgroundColor এবং pointBorderColor ব্যবহার করে মার্কারের রঙ পরিবর্তন করতে পারেন। এছাড়া pointBorderWidth দিয়ে মার্কারের বর্ডারের প্রস্থ কাস্টমাইজ করতে পারেন।

উদাহরণ: কাস্টম মার্কারের রঙ এবং বর্ডার কাস্টমাইজ করা

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'line', // লাইন চার্ট
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales Data',
            data: [12, 19, 3, 5],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false,
            pointStyle: 'star', // কাস্টম মার্কার (স্টার)
            pointRadius: 15, // পয়েন্টের আকার
            pointBackgroundColor: 'rgba(255, 99, 132, 1)', // মার্কারের ব্যাকগ্রাউন্ড রঙ
            pointBorderColor: 'rgba(54, 162, 235, 1)', // মার্কারের বর্ডার রঙ
            pointBorderWidth: 3 // বর্ডারের প্রস্থ
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

এখানে:

• pointBackgroundColor দিয়ে মার্কারের অভ্যন্তরীণ রঙ কাস্টমাইজ করা হয়েছে।
• pointBorderColor দিয়ে বর্ডারের রঙ এবং pointBorderWidth দিয়ে বর্ডারের প্রস্থ কাস্টমাইজ করা হয়েছে।

৪. Multiple Datasets এবং Different Shapes

Chart.js আপনাকে একাধিক ডেটাসেট এবং তাদের জন্য বিভিন্ন point shapes ব্যবহার করার সুযোগ দেয়। আপনি একটি চার্টে বিভিন্ন ডেটাসেটের জন্য আলাদা আলাদা পয়েন্ট শেপ ব্যবহার করতে পারেন।

উদাহরণ: একাধিক ডেটাসেট এবং ভিন্ন ভিন্ন পয়েন্ট শেপ

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'line', // লাইন চার্ট
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [
            {
                label: 'Sales Data',
                data: [12, 19, 3, 5],
                borderColor: 'rgba(75, 192, 192, 1)',
                fill: false,
                pointStyle: 'circle', // প্রথম ডেটাসেটের জন্য সার্কেল
                pointRadius: 10,
            },
            {
                label: 'Profit Data',
                data: [8, 16, 2, 7],
                borderColor: 'rgba(153, 102, 255, 1)',
                fill: false,
                pointStyle: 'triangle', // দ্বিতীয় ডেটাসেটের জন্য ট্রায়াঙ্গেল
                pointRadius: 10,
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

এখানে:

• প্রথম ডেটাসেটের জন্য pointStyle: 'circle' এবং দ্বিতীয় ডেটাসেটের জন্য `pointStyle: 'triangle' ব্যবহার করা হয়েছে।

সারাংশ

Chart.js-এ Data Point Shapes এবং Custom Markers কাস্টমাইজেশন খুবই শক্তিশালী এবং ইন্টারেস্টিং। আপনি ডেটা পয়েন্টের আকার পরিবর্তন করতে পারেন, যেমন circle, triangle, star, rect ইত্যাদি, অথবা কাস্টম মার্কারের জন্য ছবি ব্যবহার করতে পারেন। এছাড়া, আপনি মার্কারের রঙ এবং বর্ডার কাস্টমাইজ করে চার্টের ভিজ্যুয়াল স্টাইল আরও উন্নত করতে পারেন। Multiple Datasets ব্যবহার করে আপনি একাধিক ডেটাসেটের জন্য বিভিন্ন শেপ ব্যবহার করতে পারেন।